<template>
    <div class="verify-wrapper">

        <div class="rule_title">
            <span class="title-l">
                <i class="icon_left"></i>{{ titleTip }}
            </span>
        </div>
        <TempVerify v-if="validation_class == 1" :mode="mode" :id="id" :validation_class="validation_class"></TempVerify>
        <IncubatorVerify v-if="validation_class == 2" :mode="mode" :id="id" :validation_class="validation_class">
        </IncubatorVerify>
        <ColdCarVerify v-if="validation_class == 3" :mode="mode" :id="id" :validation_class="validation_class">
        </ColdCarVerify>
        <ColdStorageVerify v-if="validation_class == 4" :mode="mode" :id="id" :validation_class="validation_class">
        </ColdStorageVerify>
        <QualityVerify v-if="validation_class == 5" :mode="mode" :id="id" :validation_class="validation_class">
        </QualityVerify>
        <SystemVerify  v-if="validation_class == 6" :mode="mode" :id="id" :validation_class="validation_class">

        </SystemVerify>
    </div>
</template>

<script>
import TempVerify from './components/tempVerify.vue';
import IncubatorVerify from './components/incubatorVerify.vue';
import ColdCarVerify from './components/coldCarVerify.vue';
import ColdStorageVerify from './components/coldStorageVerify.vue';
import QualityVerify from './components/qualityVerify.vue';
import SystemVerify from './components/systemVerify.vue';

export default {
    name: 'verifyEdit',
    components: { TempVerify, IncubatorVerify, ColdCarVerify, ColdStorageVerify, QualityVerify ,SystemVerify},
    props: [],
    data() {
        return {
            validation_class: '1',
            mode: "",
            id: ''
        };
    },
    computed: {
        titleTip() {
            return [, '温度计验证', '保温箱验证', '冷藏车验证', '冷库验证', '质量验证', '系统验证'][this.validation_class];
        }
    },
    mounted() {
        this.mode = this.$route.query.mode || 'add';
        this.validation_class = this.$route.query.type * 1 || 1;
        this.id = this.$route.query.id;
    },
    methods: {},
};
</script>
<style lang="scss" scoped>
.verify-wrapper {
    background: #fff;
    box-sizing: border-box;
    padding: 20px;

    .rule_title {
        // background: red;
        display: flex;
        align-items: center;
        padding-bottom: 18px;
        padding-top: 8px;
        font-size: 14px;
        font-weight: bold;
        justify-content: space-between;

        .title-l {
            display: flex;
            align-items: center;
        }

        .icon_left {
            display: inline-block;
            width: 6px;
            height: 16px;
            background: #f1a357;
            margin-right: 6px;
        }

        .icon-right {}
    }

    /deep/.operation-footer {
        position: fixed;
        width: calc(100% - 180px);
        bottom: 0;
        background: white;
        box-sizing: border-box;
        padding: 15px 0;
        box-shadow: 0px -10px 20px -10px rgba(0, 0, 0, 0.07);
        z-index: 100;
        left: 180px;

        .footer-wrap {
            text-align: center;
        }
    }
}</style>